<template>
	<div>
		<p class="title-label title_text">数据统计</p>
		<div class="content_wrap">
			<div class="chart_wrap">
				<AplidCharts type="BasicBar" :option="option" ref="chartBarEl"></AplidCharts>
			</div>
			<ReportPreview class="title-label"></ReportPreview>
		</div>
	</div>
</template>

<script lang="ts">
export default {
  name:'DataStatistics',
  inheritAttrs: false,
};
</script>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import ReportPreview from '../ReportPreview/index.vue'

const chartBarEl = ref(null)
let source = ref([])
const loading = ref(false)
let colors = ['#0052D9', '#00A870', '#ED7B2F']
const itemStyle = {
	barBorderRadius: [4, 4, 0, 0],
	emphasis: {
		shadowBlur: 10,
		shadowOffsetX: 0,
		shadowColor: 'rgba(0, 0, 0, 0.3)',
	},
}
const option = {
	color: colors,
	dataset: {
		source: [
			['product', '服务对象', '从业人员', '志愿者'],
			['玄武区', 0, 0, 0],
			['秦淮区',  0, 0, 0],
			['建邺区',  0, 0, 0],
			['鼓楼区',  0, 0, 0],
			['浦口区',  0, 0, 0],
			['栖霞区',  0, 0, 0],
			['雨花台区',  0, 0, 0],
			['江宁区',  0, 0, 0],
			['六合区',  0, 0, 0],
			['溧水区',  0, 0, 0],
			['高淳区',  0, 0, 0],
		],
    
	},
	series: [
		{
			type: 'bar',
			itemStyle,
		},
		{
			type: 'bar',
			itemStyle,
		},
		{
			type: 'bar',
			itemStyle,
		},
	],
}


const getInitData = ()=> {
  loading.value = true 

  Promise.all([
    apiMod.view_dpStatistics_search({
    belongStatics:'application',
  }),
    // apiMod.view_dpServiceObject_statistic({}),
    apiMod.view_dpFoundationPractitioners_statistic({}),
    apiMod.view_dpVolunteer_statistic({}),
  ]).then((res) => {
    return res.map(item=>item.data)
  }).then(res=> {
    const oldmanV = res[0]['服务对象']
    let oldman = {}
    if(oldmanV) {
      oldmanV.map(item=> {
        oldman[item.areaName] = item.areaNum
      })
    }
    console.log(oldman,'oldman')
    const found = res[1]
    const volunteer = res[2]
    source.value = Object.keys(oldman).map(area=> {
      return [area,oldman[area],found[area],volunteer[area]]
    })
    chartBarEl.value?.setOptions({
      dataset: {
        source: [
          ['product', '服务对象', '从业人员', '志愿者'],
          ...source.value,
		    ],
	    },
    })
  })
}

onMounted(() => {
	getInitData()
})
</script>

<style lang="scss" scoped>
.title_text {
	display: flex;
	align-items: center;
}
.content_wrap {
	border-radius: 10px;
	background: #fff;
}
</style>
